<template>
  <div class="content">
    <a-page-header
        title="OJ 在线判题系统"
        subtitle="创建比赛"
        :show-back="false"
    >
      <template #breadcrumb>
        <a-breadcrumb>
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>比赛</a-breadcrumb-item>
          <a-breadcrumb-item>创建比赛</a-breadcrumb-item>
        </a-breadcrumb>
      </template>
      <template #extra>
        <a-space>
          <a-button @click="$refs.matchFormRef.resetFields()">
            <template #icon>
              <icon-sync />
            </template>
            重置
          </a-button>
          <a-button
              type="primary"
              @click="handleSubmit()"
              style="width: 100px;">
            <template #icon>
              <icon-send />
            </template>
            提交
          </a-button>
        </a-space>
      </template>
    </a-page-header>
    <a-card style="margin-top: 20px;padding: 20px 20px 0;">
      <a-form :model="matchForm" layout="vertical" :rules="rules" ref="matchFormRef">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="matchTitle" label="比赛标题" >
              <a-input v-model="matchForm.matchTitle" placeholder="请输入比赛标题" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="matchHost" label="主办方" >
              <a-input v-model="matchForm.matchHost" placeholder="请输入主办方" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row  :gutter="18">
          <a-col :span="12">
            <a-form-item field="matchType" label="比赛类型" >
              <a-radio-group v-model="matchForm.matchType">
                <a-radio :value="0">个人赛</a-radio>
                <a-radio :value="1">团队赛</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="matchNum" label="比赛人数" >
              <a-input-number
                  style="width: 100%;"
                  v-model="matchForm.matchNum"
                  model-event="input"
                  placeholder="请选择比赛人数"
                  :min="1"
                  :max="500" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row  :gutter="16">
          <a-col :span="12">
            <a-form-item field="startTime" label="开始时间" >
              <a-date-picker  style="width: 100%;" show-time v-model="matchForm.startTime"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="endTime" label="结束时间" >
              <a-date-picker style="width: 100%;" show-time v-model="matchForm.endTime" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row  :gutter="16">
          <a-col :span="12">
            <a-form-item field="matchStatus" label="比赛状态" >
              <a-radio-group v-model="matchForm.matchStatus">
                <a-radio :value="0">筹备中</a-radio>
                <a-radio :value="1">未开始</a-radio>
                <a-radio :value="2">进行中</a-radio>
                <a-radio :value="3">已结束</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="isExamine" label="是否需要审核" >
              <a-radio-group v-model="matchForm.isExamine">
                <a-radio :value="0">需要</a-radio>
                <a-radio :value="1">不需要</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row  :gutter="18">
          <a-col :span="24">
            <a-form-item field="intro" label="比赛简介" >
              <a-textarea
                  v-model="matchForm.intro"
                  placeholder="请输入比赛简介"
                  allow-clear
                  :max-length="50"
                  show-word-limit
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row  :gutter="18">
          <a-col :span="24">
            <a-form-item field="matchTip" label="比赛提示" >
              <a-textarea
                  v-model="matchForm.matchTip"
                  placeholder="请输入比赛提示"
                  allow-clear
                  :max-length="50"
                  show-word-limit/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">

import {ref} from "vue";
import {Message} from "@arco-design/web-vue";
import request from "../../axios/axios.ts";

const matchFormRef = ref();

const matchForm = ref({
  endTime: "",
  intro: "",
  isExamine: 0,
  matchHost: "",
  matchNum: 1,
  matchStatus: 0,
  matchTip: "",
  matchTitle: "",
  matchType: 0,
  startTime: ""
})

const rules = {
  matchTitle: [
    { required: true, message: '比赛标题不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '比赛标题长度在1到50个字符', trigger: 'blur' }
  ],
  matchHost: [
    { required: true, message: '主办方不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '主办方长度在1到50个字符', trigger: 'blur' },
  ],
  matchNum: [
    { required: true, message: '比赛人数不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '比赛人数长度在1到50个字符', trigger: 'blur' }
  ],
  matchStatus: [    { required: true, message: '比赛状态不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '比赛状态长度在1到50个字符', trigger: 'blur'}
  ],
  matchType: [
    { required: true, message: '比赛类型不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '比赛类型长度在1到50个字符', trigger: 'blur' }
  ],
  intro: [
    { required: true, message: '比赛简介不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '比赛简介长度在1到50个字符', trigger: 'blur'}
  ],
  matchTip: [
    { required: true, message: '比赛提示不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '比赛提示长度在1到50个字符', trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: '开始时间不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '开始时间长度在1到50个字符', trigger: 'blur'}
  ],
  endTime: [
    { required: true, message: '结束时间不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '结束时间长度在1到50个字符', trigger: 'blur'}
  ],
  isExamine: [
    { required: true, message: '是否需要审核不能为空', trigger: 'blur' },
    { min: 1, max: 50, message: '是否需要审核长度在1到50个字符', trigger: 'blur' }
  ],
}

const handleSubmit = () => {
  matchFormRef.value.validate().then((error) => {
    if (error){
      Message.warning("请先按照要求填写表单")
      return
    }
    request.post("/api/match/create",{
      ...matchForm.value
    }).then(res => {
      if (res.data.success){
        Message.success("创建比赛成功")
        matchFormRef.value.resetFields()
      }
    })
  })
}

</script>

<style scoped>
.content {
  padding: 20px;
  width: 80%;
  margin: 0 auto;
}
</style>
